import Vue from "vue"
import App from "./App.vue"
import VueRouter from 'vue-router'
import router from "./router"
// import store from 'store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

// 引入qiankun里的两个方法
// import { registerMicroApps, setDefaultMountApp, start } from "qiankun"
import { registerMicroApps, start, addGlobalUncaughtErrorHandler, initGlobalState } from "qiankun"

Vue.use(VueRouter);
Vue.use(ElementUI);
Vue.config.productionTip = false;

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

// 在主应用中注册子应用
/**
 * name: 微应用名称 - 具有唯一性--要跟你你创建的项目的名称一致
 * entry: 微应用入口 - 通过该地址加载微应用-- 默认加载这个html，解析里面的js动态的执行（子应用必须支持跨域，内部使用的是 fetch）
 * container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上--主应用内给子应用挂载的容器名id
 * activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用---通过哪一个路由来激活
 */
registerMicroApps([
    {
        name: 'qiankun-vue2',
        entry: 'http://localhost:8093/',
        container: '#yourContainer1',
        activeRule: '/containerVue',
        sandbox: {
            strictStyleIsolation: true // 开启样式隔离
        },
        props: {
            appContent: '我是父应用传给子应用的值1'
        }
    },
    {
        name: 'qiankun-react',
        entry: 'http://192.168.255.10:8094/',
        container: '#yourContainer2',
        activeRule: '/containerReact',
        sandbox: {
            strictStyleIsolation: true // 开启样式隔离
        },
        props: {
            appContent: '我是父应用传给子应用的值2'
        }
    },
    // {
    //     name: 'qiankun-vue3',
    //     entry: 'http://localhost:8095/',
    //     container: '#yourContainer3',
    //     activeRule: '/containerVueThree',
    //     sandbox: {
    //         strictStyleIsolation: true // 开启样式隔离
    //     },
    //     props: {
    //         appContent: '我是父应用传给子应用的值3'
    //     }
    // },
],
    {
        beforeLoad: [
            app => { // 挂载前回调
                console.log("before load", app.name);
                return Promise.resolve();
            }
        ],
        beforeMount: [
            app => { // 挂载后回调
                console.log("before mount", app.name);
                return Promise.resolve();
            }
        ],
        afterUnmount: [
            app => { // 卸载后回调
                console.log("after unload", app.name);
                return Promise.resolve();
            }
        ]
    }
);
/**
 * 添加全局的未捕获异常处理器
 */
addGlobalUncaughtErrorHandler((event) => {
    console.error(event);
    const { message: msg } = event;
    // 加载失败时提示
    if (msg && msg.includes("died in status LOADING_SOURCE_CODE")) {
        ElementUI.Message({
            message: '微应用加载失败，请检查应用是否可运行',
            type: 'error'
        });
    }
});
// setDefaultMountApp("/vue");
// 启动
start(); // export---start()




// // 新增：用于保存vue实例
// let instance = null;

// // 新增：动态设置 webpack publicPath，防止资源加载出错
// if (window.__POWERED_BY_QIANKUN__) {
//     // eslint-disable-next-line no-undef  
//     __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
// }
// /** * 新增： * 渲染函数 * 两种情况：主应用生命周期钩子中运行 / 微应用单独启动时运行 */
// function render() {
//     // 挂载应用  
//     instance = new Vue({
//         router,
//         // store,
//         render: (h) => h(App),
//     }).$mount("#qiankun-vue2");
// }

// // 新增：独立运行时，直接挂载应用
// if (!window.__POWERED_BY_QIANKUN__) {
//     render();
// }
// /** 
// * 新增： 
// * bootstrap 只会在微应用初始化的时候调用一次，
//   下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。 
// * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。 
// */
// export async function bootstrap() {
//     console.log("VueMicroApp bootstraped");
// }
// /** 
// * 新增： 
// * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法 
// */
// export async function mount(props) {
//     console.log("VueMicroApp mount", props);
//     render(props);
// }
// /** 
// * 新增： 
// * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例 
// */
// export async function unmount() {
//     console.log("VueMicroApp unmount");
//     instance.$destroy();
//     instance = null;
// }



// 应用间的通信
// 初始化全局变量
const { onGlobalStateChange, setGlobalState } = initGlobalState({
    user: 'qiankun'
})

// 把监测变量改变和改变状态挂载到Vue上
Vue.prototype.$onGlobalStateChange = onGlobalStateChange
Vue.prototype.$setGlobalState = setGlobalState

// 监测变量改变
onGlobalStateChange((value, prev) => console.log('[onGlobalStateChange - master]:', value, prev), true)

// 改变全局变量
setGlobalState({
    user: 'master'
})